import { View } from "@tarojs/components";
import React, { useState } from "react";
import { AtFloatLayout } from "taro-ui";
import "./index.scss";
import closeBlackIcon from "../../assets/close-black.png";
import classNames from "classnames";
import { MenuListType } from "../header";
import { ChannelList } from "../channel-list";
import { IChannel } from "src/interfaces";

interface AllChannelType {
  isOpened: boolean;
  setIsOpened: Function;
  scrollToCenter: Function;
  channelList: IChannel[];
}

export const AllChannel = ({
  isOpened,
  setIsOpened,
  scrollToCenter,
  channelList,
}: AllChannelType) => {
  return (
    <View className="all-channel">
      <AtFloatLayout
        className="all-channel-layout"
        isOpened={isOpened}
        title="全部频道"
        onClose={(val) => {
          setIsOpened(val);
        }}
      >
        <ChannelList
          setIsOpened={setIsOpened}
          scrollToCenter={scrollToCenter}
          list={channelList}
        />
      </AtFloatLayout>
    </View>
  );
};
